<!-- eslint-disable no-unused-vars -->
<template>
	<div class="realtime-quality-container">
		<template v-if="qualityDate.length > 0">
			<div class="total-score-box">
				<p class="title">
					<span class="score-text">质检总得分:</span>
					<span class="sore">{{ totalScore }}</span>
				</p>
				<div class="fail-wrapper">
					<p v-if="!isPass">
						<img src="@/assets/img/err-failed.png" alt="" />
						<span class="fail-text">不通过</span>
						<span class="passing-conditions">(通过条件：单项质检全部通过)</span>
					</p>
					<p v-else>
						<img src="@/assets/img/success-pass.png" alt="" />
						<span class="success-text">通过</span>
						<span class="passing-conditions">(通过条件：单项质检全部通过)</span>
					</p>
				</div>
			</div>
			<p class="quality-details-text">质检详情</p>
			<div class="faceComparison-box" v-if="faceStatus">
				<p class="score-item">
					<span class="score-text">人脸比对单项得分:</span>
					<span class="sore">{{ faceComparisonScore.score }}</span>
				</p>
				<p class="pass-through-wrapper">
					<img src="@/assets/img/success-pass.png" alt="" v-if="faceComparisonScore.isPass" />
					<img src="@/assets/img/err-failed.png" alt="" v-else />
					<span class="success-text" v-if="faceComparisonScore.isPass">通过</span>
					<span class="fail-text" v-else>不通过</span>
					<span class="passing-conditions">(通过最低分值： {{ faceComparisonScore.thresholdPoint }})</span>
				</p>
				<span class="view-details" @click="onViewDetails('faceComparison')" v-if="isTriggered">查看明细</span>
				<span v-else class="no-status-text">未触发质检</span>
			</div>
			<div class="faceComparison-box" v-if="invivoStatus">
				<p class="score-item" style="margin-top: 23px">
					<span class="score-text">活体检测单项得分:</span>
					<span class="sore">{{ invivoDetectionScore.score }}</span>
				</p>
				<p class="pass-through-wrapper">
					<img src="@/assets/img/success-pass.png" alt="" v-if="invivoDetectionScore.isPass" />
					<img src="@/assets/img/err-failed.png" alt="" v-else />
					<span class="success-text" v-if="invivoDetectionScore.isPass">通过</span>
					<span class="error-text" v-else>不通过</span>
					<span class="passing-conditions">(通过最低分值： {{ invivoDetectionScore.thresholdPoint }})</span>
				</p>
				<span class="view-details" @click="onViewDetails('invivoDetection')" v-if="isTriggered">查看明细</span>
				<span v-else class="no-status-text">未触发质检</span>
			</div>
			<div class="faceComparison-box" v-if="customerStatus">
				<p class="score-item" style="margin-top: 23px">
					<span class="score-text">客户敏感词单项得分:</span>
					<span class="sore">{{ customerWordsScore.score }}</span>
				</p>
				<p class="pass-through-wrapper">
					<img src="@/assets/img/success-pass.png" alt="" v-if="customerWordsScore.isPass" />
					<img src="@/assets/img/err-failed.png" alt="" v-else />
					<span class="success-text" v-if="customerWordsScore.isPass">通过</span>
					<span class="error-text" v-else>不通过</span>
					<span class="passing-conditions">(通过最低分值： {{ customerWordsScore.thresholdPoint }})</span>
				</p>
				<span class="view-details" @click="onViewDetails('customerWords')" v-if="customerStatus">查看明细</span>
				<span v-else class="no-status-text">未触发质检</span>
			</div>
			<div class="faceComparison-box" v-if="agentStatus">
				<p class="score-item" style="margin-top: 23px">
					<span class="score-text">坐席敏感词单项得分:</span>
					<span class="sore">{{ agentWordsScore.score }}</span>
				</p>
				<p class="pass-through-wrapper">
					<img src="@/assets/img/success-pass.png" alt="" v-if="agentWordsScore.isPass" />
					<img src="@/assets/img/err-failed.png" alt="" v-else />
					<span class="success-text" v-if="agentWordsScore.isPass">通过</span>
					<span class="error-text" v-else>不通过</span>
					<span class="passing-conditions">(通过最低分值： {{ agentWordsScore.thresholdPoint }})</span>
				</p>
				<span class="view-details" @click="onViewDetails('agentWords')" v-if="isTriggeredAgent">查看明细</span>
				<span v-else class="no-status-text">未触发质检</span>
			</div>
		</template>

		<!-- 查看人脸比对得分明细组件 -->
		<ViewDetailsQuality
			v-if="showFaceComparisonDialog"
			:dialogVisible="showFaceComparisonDialog"
			:viewTitle="viewTitle"
			:viewDetailsData="faceComparisonData"
			@handleClose="
				() => {
					this.showFaceComparisonDialog = false;
				}
			"
		/>
		<!-- 活体检测得分明细组件 -->
		<ViewDetailsQuality
			v-if="showInvivoDetectionDialog"
			:dialogVisible="showInvivoDetectionDialog"
			:viewTitle="viewTitle"
			:viewDetailsData="invivoDetectionData"
			@handleClose="
				() => {
					this.showInvivoDetectionDialog = false;
				}
			"
		/>
		<!-- 客户敏感词得分明细 -->
		<SensitiveWords
			v-if="showCustomerDialog"
			:dialogVisible="showCustomerDialog"
			:viewTitle="viewTitle"
			:sensitiveWordsData="customerWodsData"
			@handleClose="
				() => {
					this.showCustomerDialog = false;
				}
			"
		/>
		<!-- 坐席敏感词得分明细 -->
		<SensitiveWords
			v-if="showAgentDialog"
			:dialogVisible="showAgentDialog"
			:viewTitle="viewTitle"
			:sensitiveWordsData="agentWodsData"
			@handleClose="
				() => {
					this.showAgentDialog = false;
				}
			"
		/>
	</div>
</template>

<script>
import ViewDetailsQuality from './componets/ViewDetailsQuality.vue';
import SensitiveWords from './componets/SensitiveWords.vue';
import { getBizflowquality, getCategoryQuality } from '@/api/api.js';
export default {
	name: '',
	components: { ViewDetailsQuality, SensitiveWords },
	props: {
		sessionId: {
			type: String,
			require: true,
			default: () => ''
		}
	},
	data() {
		return {
			totalScore: 0, //质检总得分
			faceStatus: false, //人脸比对未触发质检
			// 人脸比对得分明细数据结构
			showFaceComparisonDialog: false, //是否显示人脸比对得分明细弹框
			viewTitle: '', //质检报告弹框标题
			// 人脸比对得分明细数据结构
			faceComparisonData: {
				singleFullMarks: '', //单项满分
				individualScore: '', //单项得分
				status: false, //状态
				startTime: '', // 检测开始时间
				endTime: '', // 检测结束时间
				timeInterval: '', //检测时间间隔
				tableData: [], //表格数据
				thresholdPoint: '' //通过最低分
			},
			showInvivoDetectionDialog: false, //是否显示活体检测得分明细弹框
			// 活体检测得分明细数据结构
			invivoDetectionData: {
				singleFullMarks: '', //单项满分
				individualScore: '', //单项得分
				status: false, //状态
				startTime: '', // 检测开始时间
				endTime: '', // 检测结束时间
				timeInterval: '', //检测时间间隔
				tableData: [], //表格数据
				thresholdPoint: '' //通过最低分
			},
			showCustomerDialog: false, //是否显示客户敏感词得分明细弹框
			// 客户敏感词得分明细数据结构
			customerWodsData: {
				singleFullMarks: '', //单项满分
				individualScore: '', //单项得分
				status: true, //状态
				startTime: '', // 检测开始时间
				endTime: '', // 检测结束时间
				tableData: [], //表格数据
				thresholdPoint: '' //通过最低分
			},
			showAgentDialog: false, //是否显示坐席敏感词得分明细弹框
			// 坐席敏感词得分明细数据结构
			agentWodsData: {
				singleFullMarks: '', //单项满分
				individualScore: '', //单项得分
				status: true, //状态
				startTime: '', // 检测开始时间
				endTime: '', // 检测结束时间
				tableData: [], //表格数据
				thresholdPoint: '' //通过最低分
			},
			qualityReportData: [], //实时质检报告列表数据
			isPass: false, //质检是否通过
			// 人脸比对单项得分
			faceComparisonScore: {
				score: '0',
				isPass: false,
				thresholdPoint: 0,
				totalPoint: 0
			},
			// 活体检测单项得分
			invivoDetectionScore: {
				score: '0',
				isPass: false,
				thresholdPoint: 0,
				totalPoint: 0
			},
			// 访客敏感词单项得分
			customerStatus: false,
			customerWordsScore: {
				score: '0',
				isPass: false,
				thresholdPoint: 0,
				totalPoint: 0
			},
			agentStatus: false,
			// 坐席敏感词单项得分
			agentWordsScore: {
				score: '0',
				isPass: false,
				thresholdPoint: 0,
				totalPoint: 0
			},
			isTriggered: false,
			qualityDate: [],
			createdAt: '',
			closedAt: '',
			isTriggeredAgent: false
		};
	},
	mounted() {
		this.initBizflowquality();
	},
	methods: {
		// 点击查看明显按钮
		onViewDetails(type) {
			console.log('onViewDetails', type);
			if (type === 'faceComparison') {
				this.faceComparisonData.singleFullMarks = this.faceComparisonScore.totalPoint;
				this.faceComparisonData.individualScore = this.faceComparisonScore.score; //thresholdPoint
				this.faceComparisonData.status = this.faceComparisonScore.isPass;
				this.faceComparisonData.thresholdPoint = this.faceComparisonScore.thresholdPoint;
				this.faceComparisonData.startTime = this.createdAt;
				this.faceComparisonData.endTime = this.closedAt;
				this.faceComparisonData.timeInterval = this.faceComparisonScore.intervalMS;
				this.initRecordDetailed('1');
				this.showFaceComparisonDialog = true;
				this.viewTitle = '人脸比对得分明细';
			} else if (type === 'invivoDetection') {
				this.invivoDetectionData.singleFullMarks = this.invivoDetectionScore.totalPoint;
				this.invivoDetectionData.individualScore = this.invivoDetectionScore.score;
				this.invivoDetectionData.status = this.invivoDetectionScore.isPass;
				this.invivoDetectionData.thresholdPoint = this.invivoDetectionScore.thresholdPoint;
				this.invivoDetectionData.startTime = this.createdAt;
				this.invivoDetectionData.endTime = this.closedAt;
				this.invivoDetectionData.timeInterval = this.invivoDetectionScore.intervalMS;
				this.initRecordDetailed('2');
				this.showInvivoDetectionDialog = true;
				this.viewTitle = '活体检测得分明细';
			} else if (type === 'customerWords') {
				this.customerWodsData.singleFullMarks = this.customerWordsScore.totalPoint;
				this.customerWodsData.individualScore = this.customerWordsScore.score;
				this.customerWodsData.thresholdPoint = this.customerWordsScore.thresholdPoint;
				this.customerWodsData.status = this.customerWordsScore.isPass;
				this.customerWodsData.startTime = this.createdAt;
				this.customerWodsData.endTime = this.closedAt;
				this.initRecordDetailed('3');
				this.showCustomerDialog = true;
				this.viewTitle = '客户敏感词得分明细';
			} else if (type === 'agentWords') {
				this.agentWodsData.singleFullMarks = this.agentWordsScore.totalPoint;
				this.agentWodsData.individualScore = this.agentWordsScore.score;
				this.agentWodsData.thresholdPoint = this.agentWordsScore.thresholdPoint;
				this.agentWodsData.status = this.agentWordsScore.isPass;
				this.agentWodsData.startTime = this.createdAt;
				this.agentWodsData.endTime = this.closedAt;
				this.initRecordDetailed('4');
				this.showAgentDialog = true;
				this.viewTitle = '坐席敏感词得分明细';
			}
		},
		// 初始化实时质检报告列表
		async initBizflowquality() {
			try {
				const { data } = await getBizflowquality(this.sessionId);
				this.qualityDate = data?.details;
				if (data?.details && data?.details.length > 0) {
					console.log(data);
					this.totalScore = data.totalScore;
					this.isPass = data.isPass;
					this.createdAt = this.$moment(data.createdAt).format('YYYY-MM-DD HH:mm:ss');
					console.log(data.createdAt, 'createdAt', this.createdAt);
					this.closedAt = this.$moment(data.closedAt).format('YYYY-MM-DD HH:mm:ss');
					console.log(data.closedAt, 'closedAt', this.closedAt);
					data.details.map(item => {
						if (item?.category === '1') {
							// 人脸比对单项得分: score
							// 通过最低分值：thresholdPoint
							this.faceStatus = true;
							this.isTriggered = item.isTriggered;
							console.log(item.score, item.thresholdPoint);
							this.faceComparisonScore = item;
							console.log('faceComparisonScore:', this.faceComparisonScore);
						} else if (item?.category === '2') {
							this.invivoStatus = true;
							this.isTriggered = item.isTriggered;
							this.invivoDetectionScore = item;
							console.log('invivoDetectionScore', this.invivoDetectionScore);
							this.isTriggered = item.isTriggered;
						} else if (item?.category === '3') {
							this.customerStatus = true;
							this.customerWordsScore = item;
							console.log('customerWordsScore:', this.customerWordsScore);
						} else if (item?.category === '4') {
							this.agentStatus = true;
							this.agentWordsScore = item;
							console.log('agentWordsScore:', this.agentWordsScore);
							this.isTriggeredAgent = item.isTriggered;
						}
					});
				} else {
					console.log('initBizflowquality function error', data);
				}
			} catch (error) {
				console.log(error);
			}
		},
		// 实时质检报告记录明细
		async initRecordDetailed(id) {
			try {
				const { data } = await getCategoryQuality(this.sessionId, id, false);
				console.log(data.data, 'initRecordDetailed');
				if (data.code === 200 && data?.data) {
					//单项满分：totalPoint  上个接口带过来
					// intervalMS 检测时间间隔
					console.log(data.data);
					data.data.map(item => {
						if (item?.category === '1') {
							// console.log(item);
							// console.log(this.faceComparisonScore, 1111);
							this.faceComparisonData.tableData = data?.data.map(current => {
								return {
									detectionTime: this.$moment(current.createdAt).format('YYYY-MM-DD HH:mm:ss'),
									detectionValue: current.detectionValue,
									threshold: current.thresholdValue,
									deductPoints: `-${current.minusPoint}`
								};
							});
							console.log(this.faceComparisonData, 'faceComparisonData');
						} else if (item?.category === '2') {
							this.invivoDetectionData.tableData = data?.data.map(current => {
								return {
									detectionTime: this.$moment(current.createdAt).format('YYYY-MM-DD HH:mm:ss'),
									detectionValue: current.detectionValue,
									threshold: current.thresholdValue,
									deductPoints: `-${current.minusPoint}`
								};
							});
							console.log(this.invivoDetectionData, 'invivoDetectionData');
						} else if (item?.category === '3') {
							// console.log(this.customerWordsScore, 'customerWordsScore');
							// console.log(item, 3333);
							this.customerWodsData.tableData = data?.data.map(current => {
								return {
									triggerTime: this.$moment(current.createdAt).format('YYYY-MM-DD HH:mm:ss'),
									violator: `${current?.client?.customerRole}<${current?.client?.userName}>`,
									illegalwords: current.badword,
									deductPoints: `-${current.minusPoint}`
								};
							});
							// console.log(this.customerWodsData, 'customerWodsData');
						} else if (item?.category === '4') {
							// console.log(item, 4444);
							this.agentWodsData.tableData = data?.data.map(current => {
								return {
									triggerTime: this.$moment(current.createdAt).format('YYYY-MM-DD HH:mm:ss'),
									violator: `坐席<${current?.client?.userName}>`,
									illegalwords: current.badword,
									deductPoints: `-${current.minusPoint}`
								};
							});
							console.log(this.agentWodsData, 'agentWodsData');
						}
					});
				} else {
					console.log('initRecordDetailed function error', data);
				}
			} catch (error) {
				console.log(error);
			}
		}
	}
};
</script>

<style lang="less" scoped>
.realtime-quality-container {
	width: 100%;
	margin-top: 26px;
	.total-score-box {
		background: #fafafa;
		border: 1px solid #e0e0e0;
		padding: 24px 0 0 18px;
		.title {
			font-size: 14px;
			font-family: PingFang SC;
			.score-text {
				font-weight: 400;
				color: #333333;
			}
			.sore {
				font-weight: 500;
				color: #000000;
				margin-left: 12px;
			}
		}
		.fail-wrapper {
			margin-top: 11px;
			padding-bottom: 28px;
			img {
				width: 14px;
				height: 14px;
			}
			.fail-text {
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ef5753;
				display: inline-block;
				margin-left: 10px;
			}
			.success-text {
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #21db63;
				display: inline-block;
				margin-left: 10px;
			}
			.passing-conditions {
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #b8b8b8;
				margin-left: 8px;
			}
		}
	}
	.quality-details-text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 18px;
		padding: 32px 0 23px 0;
	}
	.faceComparison-box {
		padding: 0px 0 24px 18px;
		border-bottom: 2px solid #e0e0e0;

		.score-item {
			font-size: 14px;
			font-family: PingFang SC;
			.score-text {
				font-weight: 400;
				color: #606266;
			}
			.sore {
				font-weight: 500;
				color: #606266;
				margin-left: 12px;
			}
		}
		.pass-through-wrapper {
			margin-top: 17px;
			img {
				width: 14px;
				height: 14px;
			}

			.success-text {
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #21db63;
				display: inline-block;
				margin-left: 10px;
			}
			.error-text {
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ef5753;
				display: inline-block;
				margin-left: 10px;
			}
			.passing-conditions {
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #b8b8b8;
				margin-left: 8px;
			}
		}
		.view-details {
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #6384fe;
			display: inline-block;
			margin-top: 23px;
			cursor: pointer;
		}
		.no-status-text {
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #606266;
			display: inline-block;
			margin-top: 23px;
		}
	}
}
</style>
